<script setup lang="ts">
  import { ref, watch } from 'vue'
  import {
    NMessageProvider,
    NLoadingBarProvider,
    NConfigProvider,
    zhCN,
    dateZhCN,
    enUS,
    dateEnUS
  } from 'naive-ui'
  import type { NLocale, NDateLocale } from 'naive-ui'
  import { useI18n } from 'vue-i18n'

  defineOptions({
    name: 'App',
    inheritAttrs: false
  })

  const { locale } = useI18n()

  type lan = {
    [key: string]: {
      locale: NLocale
      dataLocale: NDateLocale
    }
  }

  const naiveLan: lan = {
    zh: {
      locale: zhCN,
      dataLocale: dateZhCN
    },
    en: {
      locale: enUS,
      dataLocale: dateEnUS
    }
  }
  const currentLan = ref(naiveLan[locale.value])
  watch(locale, () => {
    currentLan.value = naiveLan[locale.value]
  })
</script>
<template>
  <n-message-provider>
    <n-loading-bar-provider>
      <n-config-provider
        :locale="currentLan.locale"
        :date-locale="currentLan.dataLocale"
        preflight-style-disabled
        class="w-full h-full flex"
      >
        <router-view></router-view> </n-config-provider
    ></n-loading-bar-provider>
  </n-message-provider>
</template>
